Skip to content

MkProgressBar

Show source on GitHub

Node to display a CSS-based progress bar.

Example: Regular

Jinja

{{ 60 | MkProgressBar }}

Python

MkProgressBar(60)

60%

[=60% "60%"]

<p>
<div class="progress progress-60plus">
<div class="progress-bar" style="width:60.00%">
<p class="progress-label">60%</p>
</div>
</div>
</p>

Example: Style thin

Jinja

{{ 60 | MkProgressBar(style="thin") }}

Python

MkProgressBar(60, style='thin')

60%

[=60% "60%"]{: .thin}

<p>
<div class="progress progress-60plus thin">
<div class="progress-bar" style="width:60.00%">
<p class="progress-label">60%</p>
</div>
</div>
</p>

Example: Style candystripe

Jinja

{{ 70 | MkProgressBar(style="candystripe") }}

Python

MkProgressBar(70, style='candystripe')

70%

[=70% "70%"]{: .candystripe}

<p>
<div class="progress progress-60plus candystripe">
<div class="progress-bar" style="width:70.00%">
<p class="progress-label">70%</p>
</div>
</div>
</p>

Example: Style candystripe_animated

Jinja

{{ 80 | MkProgressBar(style="candystripe_animated") }}

Python

MkProgressBar(80, style='candystripe_animated')

80%

[=80% "80%"]{: .candystripe .candystripe-animate}

<p>
<div class="progress progress-80plus candystripe candystripe-animate">
<div class="progress-bar" style="width:80.00%">
<p class="progress-label">80%</p>
</div>
</div>
</p>

Bases: MkNode

__init__ 

__init__(
    percentage: int,
    *,
    label: str | Literal[True] | None = True,
    style: Literal["thin", "candystripe", "candystripe_animated"] | None = None,
    **kwargs: Any
)

Parameters:

Name Type Description Default
percentage int

Percentage value for the progress bar

 required
label str | Literal[True] | None

Label to display on top of progress bar

 True
style Literal['thin', 'candystripe', 'candystripe_animated'] | None

Progress bar style

 None
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkNode
mknodes.basenodes.mknode
Base class for everything which can be expressed as Markup.		 
graph TD
  94721311921008["mkprogressbar.MkProgressBar"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721308848336 --> 94721311921008
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkprogressbar/metadata.toml
[metadata]
icon = "fa6-solid:bars-progress"
name = "MkProgressBar"

[[resources.css]]
filename = "progressbar.css"

[requirements.extension."pymdownx.progressbar"]

[examples.regular]
title = "Regular"
jinja = """
{{ 60 | MkProgressBar }}
"""

[examples.style_thin]
title = "Style thin"
jinja = """
{{ 60 | MkProgressBar(style="thin") }}
"""

[examples.style_candystripe]
title = "Style candystripe"
jinja = """
{{ 70 | MkProgressBar(style="candystripe") }}
"""

[examples.style_candystripe_animated]
title = "Style candystripe_animated"
jinja = """
{{ 80 | MkProgressBar(style="candystripe_animated") }}
"""

[output.markdown]
template = """
[={{ node.percentage }}% "{{ node.label }}"]
"""

[output.html5]
template = """
<label for="progress_bar">{{ node.label }}:</label>
<progress id="progress_bar" max="100" value="{{ node.percentage }}">{{ node.percentage }}%</progress>
"""
mknodes.basenodes.mkprogressbar.MkProgressBar
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
class MkProgressBar(mknode.MkNode):
    """Node to display a CSS-based progress bar."""

    REQUIRED_EXTENSIONS = [resources.Extension("pymdownx.progressbar")]
    ICON = "fontawesome/solid/bars-progress"
    CSS = [resources.CSSFile("progressbar.css")]
    ATTR_LIST_SEPARATOR = ""

    def __init__(
        self,
        percentage: int,
        *,
        label: str | Literal[True] | None = True,
        style: Literal["thin", "candystripe", "candystripe_animated"] | None = None,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            percentage: Percentage value for the progress bar
            label: Label to display on top of progress bar
            style: Progress bar style
            kwargs: Keyword arguments passed to parent
        """
        super().__init__(**kwargs)
        self._label = label
        self.percentage = percentage
        self.style = style
        match self.style:
            case "thin":
                self.add_css_class("thin")
            case "candystripe":
                self.add_css_class("candystripe")
            case "candystripe_animated":
                self.add_css_class("candystripe")
                self.add_css_class("candystripe-animate")

    @property
    def label(self) -> str:
        match self._label:
            case str():
                return self._label.format(percentage=self.percentage)
            case True:
                return f"{self.percentage}%"
            case _:
                return ""

    def _to_markdown(self) -> str:
        return rf'[={self.percentage}% "{self.label}"]'